import React, { useRef } from 'react';
import _ from 'lodash';
import moment from 'moment';
import { DatePicker, Tooltip, Input } from 'antd';
import CommonTable from '@/components/CommonTable';
import { sysLogInfo } from '@/services/system/log';

export default () => {
  const tableRef = useRef(null);

  const textOverflow = (text) => (
    <Tooltip
      title={text}
      placement="top"
      overlayInnerStyle={{ Width: '600px', maxHeight: '400px', overflowY: 'scroll' }}
    >
      <div
        style={{
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          width: '100%',
        }}
      >
        {text}
      </div>
    </Tooltip>
  );

  return (
    <>
      <CommonTable
        ref={tableRef}
        rowKey={'id'}
        indexRender
        rowSelection={{ getCheckboxProps: () => ({ disabled: false }) }}
        header={{
          headerTitle: '日志列表',
          headerToolsRender: true,
        }}
        request={async (params) => {
          // console.log('入参：', params);
          const { records, total } = await sysLogInfo(
            _.assign({}, params, {
              params: _.map(params.params, (item) =>
                item.column === 'createTime'
                  ? {
                      ...item,
                      values: moment(item.values).format('YYYY-MM-DD'),
                    }
                  : item,
              ),
            }),
          );
          return { data: records, count: total };
        }}
        search={[
          {
            key: 'operName',
            Component: Input,
            searchType: 'LIKE',
            props: {
              label: '操作人员',
              initialValue: null,
            },
            componentProps: {
              allowClear: true,
              placeholder: '请输入',
            },
          },
          {
            key: 'businessName',
            Component: Input,
            searchType: 'LIKE',
            props: {
              label: '模块名称',
              initialValue: [],
            },
            componentProps: {
              allowClear: true,
              placeholder: '请输入',
            },
          },
          {
            key: 'createTime',
            Component: DatePicker,
            searchType: 'GE',
            props: {
              label: '操作日期',
              initialValue: null,
            },
            componentProps: {
              allowClear: true,
            },
          },
        ]}
        columns={[
          { title: '操作人员', dataIndex: 'operName', columnControl: { typeList: 'search' } },
          { title: '操作时间', dataIndex: 'createTime' },
          { title: '请求地址', dataIndex: 'url', columnControl: { typeList: 'search' } },
          { title: 'IP地址', dataIndex: 'ip', columnControl: { typeList: 'search' } },
          {
            title: '模块名称',
            dataIndex: 'businessName',
            columnControl: { typeList: 'search' },
          },
          {
            title: '请求参数',
            dataIndex: 'operParam',
            width: 200,
            render: (text, data) => textOverflow(text),
          },
          {
            title: '方法名',
            dataIndex: 'method',
            columnControl: { typeList: 'search' },
            width: 200,
            ellipsis: true,
          },
          {
            title: '返回结果',
            dataIndex: 'result',
            width: 200,
            render: (text, data) => textOverflow(text),
          },
          {
            title: '错误信息',
            dataIndex: 'error',
            columnControl: { typeList: 'search' },
            width: 200,
            ellipsis: true,
          },
        ]}
      />
    </>
  );
};
